<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  width: number;
  height: number;
}

const props = defineProps<Props>();

// 根据容器大小计算字体大小和间距的缩放比例
const scale = computed(() => {
  // 基准尺寸：240px宽度作为1.0倍缩放
  const baseWidth = 240;
  const scaleRatio = Math.min(props.width / baseWidth, 1.5); // 最大1.5倍缩放
  return Math.max(scaleRatio, 0.6); // 最小0.6倍缩放
});

const containerStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.height}px`,
  fontSize: `${14 * scale.value}px`,
  '--scale': scale.value,
}));
</script>

<template>
  <div class="responsive-wrapper" :style="containerStyle">
    <slot></slot>
  </div>
</template>

<style scoped>
.responsive-wrapper {
  position: relative;
  overflow: hidden;
}

/* 响应式样式变量 */
.responsive-wrapper :deep(.responsive-title) {
  margin-bottom: calc(16px * var(--scale));
  font-size: calc(18px * var(--scale));
}

.responsive-wrapper :deep(.responsive-value) {
  margin-bottom: calc(8px * var(--scale));
  font-size: calc(32px * var(--scale));
}

.responsive-wrapper :deep(.responsive-text) {
  font-size: calc(14px * var(--scale));
  line-height: calc(20px * var(--scale));
}

.responsive-wrapper :deep(.responsive-small) {
  font-size: calc(12px * var(--scale));
  line-height: calc(16px * var(--scale));
}

.responsive-wrapper :deep(.responsive-icon) {
  width: calc(24px * var(--scale));
  height: calc(24px * var(--scale));
}

.responsive-wrapper :deep(.responsive-padding) {
  padding: calc(16px * var(--scale));
}

.responsive-wrapper :deep(.responsive-margin) {
  margin: calc(8px * var(--scale));
}

.responsive-wrapper :deep(.responsive-gap) {
  gap: calc(8px * var(--scale));
}
</style>
